<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>两列布局2：float+overflow</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.parent div{
				height: 300px;
			}
			.parent .left{/*定宽*/
				width: 300px; 
				background: red;
				/* 3.为左侧元素设置浮动 */
				float: left;
			}
			.parent .right{/*浮动*/
				background: #00FFFF;
				/* 4. 为浮动元素设置overflow，此时会开启BFC模式(当前元素的内部环境与外界完全隔离)*/
				overflow: hidden;
			}
			
			/* 
				5.float+overflow方案的优缺点：
					优点：避免了float+margin方案中的缺点。
					缺点：不仅解决了两列布局问题，开启了BFC模式后，会是内容溢出时会出现问题(子元素总是会溢出隐藏)。
			 */
		</style>
	</head>
	<body>
		<!-- 1.定义父级元素 -->
		<div class="parent">
			<!-- 2.定义子级元素 -->
			<div class="left">左侧：定宽</div>
			<div class="right">右侧：自适应</div>
		</div>
	</body>
</html>
